<template>
  <div
    v-if="
      this.$store.state.user.roles.includes('admin') ||
      this.$store.state.user.roles.includes('export')
    "
    class="dashboard-editor-container"
  >
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>
  </div>
  <div v-else class="conainer">
    <div class="center" style="flex-direction: column">
      <div class="subtitle" style="margin: 40px auto 0px auto">
        <span class="subtitle-color-grey">南京5G+工业互联网融合创新中心｜</span>
        <span class="subtitle-color-blue"
          >着力推进“智改数转”，助力高质量发展</span
        >
      </div>
      <p class="model-text" style="margin: 10px auto 40px auto">
        专业的集诊断咨询服务、优秀解决方案提供商对接、个性化智改数转实施方案、提升智能制造能力全过程跟踪
      </p>

      <div class="new-title">新闻资讯</div>
      <i class="el-icon-caret-bottom"></i>
      <div class="carousel">
        <!-- <ul
          class="infinite-list"
          v-infinite-scroll="load"
          style="overflow: auto"
        >
          <li v-for="i in tableData" class="infinite-list-item" :key="i.url">
            {{ i.title }} -- - {{ i.date }}
          </li>
        </ul> -->
        <vue-seamless-scroll  :data="tableData"   :class-option="classOption" class="seamless-warp" >
        <el-table
          :show-header="false"
          :data="tableData"
          ref="table"
          style="width: 100%;
         max-height=400px "
        >
          <el-table-column style="width: 80%" show-overflow-tooltip>
            <template slot-scope="scope">
              <a :href="scope.row.url" target="_blank" class="buttonText"
                >>{{ scope.row.title }}</a
              >
            </template>
          </el-table-column>
          <el-table-column prop="date" style="width: 20%" align="right">
          </el-table-column>
        </el-table>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import BarChart from "@/views/dashboard/BarChart";
import LineChart from "@/views/dashboard/LineChart";
import PanelGroup from "@/views/dashboard/PanelGroup";
import PieChart from "@/views/dashboard/PieChart";
import RaddarChart from "@/views/dashboard/RaddarChart";
import TodoList from "@/views/dashboard/TodoList";
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: "Index",
  components: {
    RaddarChart,
    PieChart,
    PanelGroup,
    LineChart,
    BarChart,
    TodoList,
    vueSeamlessScroll
  },

  data() {
    const lineChartData = {
      newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145],
      },
      messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130],
      },
      purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130],
      },
      shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130],
      },
    };
    return {
      index: 0,

      tableData: [
        {
          title: "南京召开全市制造业“智改数转”工作现场推进会 ",
          url: "https://www.sohu.com/a/559229673_121106832",
          date: "2022-06-18",
        },
        {
          title: "数字技术赋能！3年推动超5万家江苏规上工业企业“智改数转”全覆盖",
          url: "http://news.10jqka.com.cn/20220613/c639729511.shtml",
          date: "2022-06-13",
        },
        {
          title: "市委书记专题调研！跑出“智改数转”加速度，南京这样部署",
          url: "https://baijiahao.baidu.com/s?id=1735233524435744928&wfr=spider&for=pc",
          date: "2022-06-10",
        },
        {
          title: "“南京市制造业加快推进“智改数转”",
          url: "https://baijiahao.baidu.com/s?id=1733683674907800014&wfr=spider&for=pc",
          date: "2022-05-24",
        },
        {
          title: "江宁开发区：“智改数转”激发产业变革",
          url: "https://baijiahao.baidu.com/s?id=1732879530864840164&wfr=spider&for=pc",
          date: "2022-05-15",
        }


      ],
      // 版本号
      active: 0,
      version: "3.8.2",
      lineChartData: lineChartData.newVisitis,
    };
  },

  mounted() {

  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.active {
  background-color: #ededf5;
  height: 59px;
}
.el-carousel__container {
  height: 270px !important;
}
.word-center {
  text-align: center;
}
</style>
<style lang="scss" scoped>
.conainer {
  min-width: 1000px;
  overflow: auto;
  height: 100%;
  .header {
    height: 76px;
    display: flex;
    justify-content: space-around;
  }
  .menu {
    background-color: #e5e5f1;
    height: 60px;
  }
  .subtitle {
    margin-top: 80px;
    display: flex;
    .subtitle-color-grey {
      color: #aaa;
      font-size: 28px;
      line-height: 50px;
    }
    .subtitle-color-blue {
      color: #197bba;
      font-size: 28px;
      line-height: 50px;
    }
  }
  .new-title {
    margin-top: 40px;
    font-weight: 550;
    font-size: 20px;
  }
  .model-text {
    color: #666;
    margin: 35px 0 20px 0;
  }
  .carousel {
    width: 80%;
  }
  .obj-position {
    // display: flex;
    position: relative;
    // top: 500px;
    .maturity-wrap {
      height: 70%;
      min-height: 270px;
      width: 1200px;
      margin: auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 282px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      .fourObjBox-item {
        position: relative;
        width: 200px;
        height: 200px;
        .obj-OutsideCircular:after {
          content: "";
          display: block;
          width: 4px;
          height: 140px;
          background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#197bba),
            to(transparent)
          );
          background: linear-gradient(180deg, #197bba, transparent);
          position: absolute;
          left: 38px;
          top: 80px;
        }
        .obj-OutsideCircular {
          width: 80px;
          height: 80px;
          background-color: rgba(50, 150, 228, 0.5);
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 0;
          .obj-circular {
            width: 67px;
            height: 67px;
            background-color: #197bba;
            border-radius: 50%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            .obj-circular-text:first-of-type {
              margin-bottom: 0;
            }
            .obj-circular-text:nth-of-type(2) {
              margin-top: 0;
            }
            .obj-circular-text {
              font-size: 15px;
              color: #fff;
            }
          }
        }
        .obj-circular-container {
          width: 200px;
          position: absolute;
          left: 89px;
          .obj-circular-title {
            font-size: 19px;
            font-weight: 700;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            background-color: #197bba;
          }
          .obj-circular-content-wrap {
            color: #fff;
            padding: 8px;
            border: 1px solid #fff;
            border-top-color: transparent;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            text-align: justify;
            .obj-item-name {
              font-size: 16px;
              line-height: 29px;
            }
            .obj-item-content {
              color: #eff0f3;
              font-size: 13px;
              line-height: 20px;
              letter-spacing: 3px;
            }
          }
        }
      }
    }
  }
}
.seamless-warp {
  margin: 60px auto;
  width: 60%;
  max-height:300px;
  overflow: hidden;}
</style>
